<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="/template_bill.xhtml">

        <ui:define name="title">
            <h:outputText value="#{bundle.ListLogTitle}"></h:outputText>
        </ui:define>

        <ui:define name="body">
            <center>
                <h:form styleClass="form-inline well">
                    <h:panelGroup id="messagePanel" layout="block">
                        <h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
                    </h:panelGroup>

                    <label style="padding-left: 19px;" for="fromDate">من</label>
                    <p:calendar id="fromDate" style="padding-left: 45px;" value="#{logController.fromDate}"  showOn="button" pattern="dd/MM/yyyy" required="true" requiredMessage="من فضلك أدخل التاريخ الأول"/>
                    <label style="padding-left: 19px;" for="toDate">الى</label>
                    <p:calendar id="toDate" style="padding-left: 45px;" value="#{logController.toDate}"  showOn="button" pattern="dd/MM/yyyy" required="true" requiredMessage="من فضلك أدخل التاريخ الثانى"/>
                    <div class="clear"></div>
                    <h:commandLink  styleClass="btn-primary btn" action="#{logController.prepareList}" value="عرض"/>
                </h:form>
            </center>
            <h:form>
                <h:panelGroup rendered="#{logController.items != null}">
                    <p:dataTable value="#{logController.items}" var="item" 
                                 paginator="true" rows="100"
                                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                 rowsPerPageTemplate="100,200,300">

                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="الحدث"/>
                            </f:facet>
                            <h:outputText value="#{item.message}"/>
                        </p:column>

                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="التاريخ"/>
                            </f:facet>
                            <h:outputText value="#{item.dateLog}"  >
                                <f:convertDateTime pattern="HH:mm:ss MM/dd/yyyy" />
                            </h:outputText>
                        </p:column>

                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="اسم الموظف"/>
                            </f:facet>
                            <h:outputText value="#{item.employee.name}"/>
                        </p:column>

                    </p:dataTable>
                </h:panelGroup>
            </h:form>
        </ui:define>
    </ui:composition>
</html>